<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<div th:replace="public/base_list :: html"></div>
<body>
<!-- Start Page Loading -->
<div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
</div>

<section id="content">

    <!--在这个地方实现查询重置类的操作-->
    <div class="container">
        <div class="section">
            <form id="searchForm" class="row" action="">
                <div class="row">
                    <div class="col input-field s3 m3 l3">
                        <input id="name" name="name" type="text"/>
                        <label for="name">权限名</label>
                    </div>
                </div>
            </form>
        </div>

        <div class="row">
            <a class="waves-effect waves-light btn" id="searchBtn">搜索</a>
            <a id="resetBtn" class="waves-effect waves-light btn">重置</a>
        </div>
        <div class="row">
            <a id="createBtn" class="waves-effect waves-light btn">新增</a>
        </div>
        <div class="divider"></div>
    </div>
    <!--Form Advance-->
    <div class="row">

        <div id="refreshtable" class="col l12 m12 l12 xl12" th:fragment="table_refresh">
            <table id="data-table-simple" class="responsive-table display">
            </table>
        </div>
    </div>
</section>

<script type="text/javascript">
    var grid = new Datatable();
    $(document).ready(function () {
        initBtn();
        initTable();
    });

    function initTable() {
        grid.init({
            src: $("#data-table-simple"),
            onSuccess: function (grid) {
            },
            onError: function (grid) {
            },
            onDataLoad: function (grid) {
                initDataTableToolTip("data-table-simple", [1,2,3,4,5,6,7]);
            },
            loadingMessage: 'Loading...',
            dataTable: {
                "ajax": {
                    "url": "/unitlinforbase/permission/list.crp", // ajax source
                },
                "columns": [
                    {
                        "title": "<input type='checkbox' class='icheck' id='checkAll'>",
                        "render": function (data, type, row) {
                            return "<label><input type=\"checkbox\" value=\"" + row.id + "\" class=\"icheck\" value=\"1\" /></label>";
                        },
                        "width": "18px",
                        "orderable": false,
                        "className": "centered"
                    }, {
                        "title": "权限名称",
                        "data": "name", //实体字段
                        "name":"name"   //库中字段
                    },{
                        "title":"权限描述",
                        "data":"description",
                        "name":"description"
                    },{
                        "title":"权限字段",
                        "data":"perms",
                        "name":"perms"
                    },{
                        "title":"权限字段",
                        "data":"orderNum",
                        "name":"order_num"
                    },
                    {
                        "title": "操作",
                        "width": "120px",
                        "className": "centered",
                        "orderable": false,
                        "render": function (data, type, row) {
                            var rtnBtn = "";
                            //如果获取字符串，必须在参数外反转"
                            rtnBtn = rtnBtn +
                                "<shiro:hasPermission name=\"manager\"><a  href='javascript:;' onclick='edit(" + row.id + ',\"' + row.fileName + "\");'> <i class='mdi-editor-border-color' title='编辑权限'></i></a></shiro:hasPermission>" +
                                "<shiro:hasPermission name=\"manager\"><a  href='javascript:;' onclick='deleteInit(" + row.id + ");'> <i class='mdi-action-delete' title='删除'></i></a></shiro:hasPermission>"
                            ;
                            // 返回自定义内容
                            return rtnBtn;
                        }
                    }
                ],
                "order" : [ [ 1, "asc" ] ]
            }
        });

    }



    function edit(id) {
        var url = "/unitlinforbase/permission/update/index.crp?id=" + id;
        dialog.show(url, "编辑权限");
    }
    function addUser(id) {
        var url = "/unitlinforbase/role/addUser/index.crp?id=" + id;
        dialog.show(url, "添加用户");
    }

    function deleteInit(id) {
        layer.confirm('确定删除?', {
            btn: ['确定', '取消'] //可以无限个按钮
        }, function (index, layero) {
            $.ajax({
                type: "post",
                data: {"id": id},
                url: "/unitlinforbase/permission/delete.crp",
                dataType: "json",
                success: function (msg) {
                    if (msg.success) {
                        layer.close(index);
                        Materialize.toast(msg.message, 500,"",function () {
                            grid.reset();
                        });

                    } else {
                        layer.close(index);
                        Materialize.toast(msg.message, 3000);
                    }
                },
                error: function (data) {
                    layer.close(index);
                    Materialize.toast("网络异常");
                }
            });
        });
    }

    function initBtn() {
        //新增按钮
        $("#createBtn").click(function () {
            var url = "/unitlinforbase/permission/update/index.crp";
            dialog.show(url, "新增权限")
        });
        //搜索按钮
        $('#searchBtn').click(function () {
            //console.log("searching____");
            grid.search();
        });
        $('#resetBtn').click(function () {
            console.log("rest is running");
            grid.reset();
        });
    }

    /**
     * 初始化datatable col tooltip
     * @param controlName datatable对象名
     * @param colNo 需要展示tip的列序号数组
     */
    function initDataTableToolTip(controlName, colNo) {
        //initTooltip(controlName);
        $('#' + controlName + ' tbody tr').each(function () {
            var nTds = $('td', this);

            for (var i = 0; i < colNo.length; i++) {
                var col = colNo[i];
                if ($(nTds[col])[0] != undefined) {
                    //console.debug("initDataTableToolTip col[" + col + "]=" + $(nTds[col]).text());

                    $(nTds[col])[0].setAttribute('title', $(nTds[col]).text());
                }
            }
        });
        tooltip();
    }

    function tooltip() {
        jQuery(document).ready(function ($) {
            var sweetTitles = {
                x: 10,
                y: 20,
                tipElementsI: "i",
                noTitle: false,
                init: function () {
                    var noTitle = this.noTitle;
                    $(this.tipElementsI).each(function () {
                        $(this).mouseover(function (e) {
                            if (noTitle) {
                                isTitle = true;
                            } else {
                                isTitle = $.trim(this.title) != '';
                            }
                            if (isTitle) {
                                this.myTitle = this.title;
                                this.title = "";
                                var tooltip = "<div class='tooltip'><div class='tipsy-arrow tipsy-arrow-n'></div><div class='tipsy-btu'>" + this.myTitle + "</div></div>";
                                $('body').append(tooltip);
                                $('.tooltip').css({
                                    "top": (e.pageY + 20) + "px",
                                    "left": (e.pageX - 20) + "px"
                                }).show('fast');
                            }
                        }).mouseout(function () {
                            if (this.myTitle != null) {
                                this.title = this.myTitle;
                                $('.tooltip').remove();
                            }
                        }).mousemove(function (e) {
                            $('.tooltip').css({
                                "top": (e.pageY + 20) + "px",
                                "left": (e.pageX - 20) + "px"
                            });
                        });
                    });


                }
            };
            $(function () {
                sweetTitles.init();
            });


        });
    }
</script>
</body>
</html>

